<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="lib/jq.js"></script>
</head>

<body>
<!--<h2>基本筛选器</h2>-->
<!--<h3>:first/:last/:even/:odd</h3>-->
<div>
    <div class="div">
        <p>div:first</p>
        <p></p>
    </div>
    <div class="div">
        <p></p>
    </div>
    <div class="div">
        <p>:even</p>
    </div>
    <div class="div">
        <p>:odd</p>
    </div>
    <div class="div">
        <p>:even</p>
    </div>
    <div class="div">
        <p>div:last</p>
        <p>:odd</p>
    </div>
    <!--<form>-->
        <!--<input type="text" value="">-->
        <!--<input type="password" value="">-->
        <!--<button onclick="panduan()">点击提交</button>-->

    <!--</form>-->
</div>
<script type="text/javascript">

    $(document).ready(function(){
        //1. 找到第一个p标签
        // $("p:first").css("background-color","#B2E0FF");
        //2. 找到最后一个p标签
        // $("p:last").css("background-color","#B2E0FF");
        //3. 偶数标签
        // $("p:even").css("background-color","#B2E0FF");
        //4. 奇数标签
       // $("p:odd").css("background-color","#B2E0FF");
       //  //3. 大于
       //  $("p:gt(1)").css("background-color","#B2E0FF");
        //3. 小于
        // $("p:lt(2)").css("background-color","#B2E0FF");
        // //3. 等于
        // $("p:eq(2)").css("background-color","#B2E0FF");
        $("p:empty").css('border',"solid 1px blue");
        $("p:parent").css('border',"solid 1px red");
    });

</script>

</body>

</html>